import App from '@/App'
import { lazy, Suspense } from 'react'
import { createBrowserRouter } from 'react-router-dom'

const lazyLoad = (importFunc: any, fallback = null) => {
  const LazyComponent = lazy(importFunc);
  return (
    <Suspense fallback={fallback || <div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '/',
        element: lazyLoad(() => import('@/views/start'))
      },
      {
        path: '/talk',
        element: lazyLoad(() => import('@/views/talk'))
      },
      {
        path: '/diary',
        element: lazyLoad(() => import('@/views/diary'))
      },
      {
        path: '/article',
        element: lazyLoad(() => import('@/views/article'))
      },
      {
        path: '/photo',
        element: lazyLoad(() => import('@/views/photo/index'))
      },
      {
        path: '/message',
        element: lazyLoad(() => import('@/views/message'))
      }
    ]
  },
  {
    path: '/login',
    element: lazyLoad(() => import('@/views/login'))
  },
  {
    path: '/Ai',
    element: lazyLoad(() => import('@/views/Ai'))
  }
])

export default router
